<%-- 
    Document   : balance
    Created on : Apr 25, 2015, 7:47:17 AM
    Author     : Vinnu
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Shop Inventory | Customer Balance</title>
        <link type="text/css" rel="stylesheet" href="css/semantic.min.css"/>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/semantic.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.getScript("js/myScript.js");
                $("#customerName").on("input", function() {
                    var keyId = $('#customerName').val();
                    var phoneNumber = $('#mobile');
                    getCustomerNames(keyId, phoneNumber);
                });
                $('.billView').click(function() {
                    var selectedRow = $(this).closest('tr').find('td');
                    var details = {};
                    details.customerName = selectedRow[0].innerHTML;
                    details.date = selectedRow[1].innerHTML;
                    details.mobile = selectedRow[5].innerHTML;
                    getItemDescription(details);
                });
            });

        </script>
    </head>
    <body>
        <%@include file="customerMenu.jsp" %>
        <div class="ui one column middle aligned relaxed fitted stackable grid" id="customerBalaceDiv">
            <div class="column">
                <div class="ui form segment">
                    <form method="post" id="balanceForm" action="${pageContext.request.contextPath}/balance">
                        <div class="two fields">
                            <div class="field">
                                <label>Customer Name</label>
                                <div class="ui left icon input">
                                    <input type="text" id="customerName" list="custNames" name="customerName" placeholder="Customer Name"/>
                                    <datalist id="custNames"></datalist>
                                    <i class="user icon"></i>
                                </div>
                            </div>
                            <div class="field">
                                <label>Mobile</label>
                                <div class="ui left icon input">
                                    <input type="number" id="mobile" name="mobile" placeholder="Enter Mobile"/>
                                    <i class="user icon"></i>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <input type="submit" class="ui blue button" id="balanceSearch" value="Get Details"/> 
                            <input type="reset" class="ui green button clear" value="Clear"/>
                        </div> 
                    </form>
                </div>
                <table class="ui table segment" id="balanceTable">
                    <thead>
                        <tr>
                            <th>Customer Name</th>
                            <th>Date</th>
                            <th>Purchase Amount</th>
                            <th>Paid amount</th>
                            <th>Balance</th>
                            <th>Mobile</th>
                            <th>Bill Details</th>
                        </tr>
                    </thead>
                    <tbody>

                        <c:forEach items="${MapDetails['Transactions']}" var="customer">
                            <tr>
                                <td><c:out value="${customer.customer_Id.customer_Name}"/></td>
                                <td><c:out value="${customer.date}"/></td>
                                <td><c:out value="${customer.purchase_Amount}"/></td>
                                <td><c:out value="${customer.payment_Amount}"/></td>
                                <td><c:out value="${customer.remaining_Balance}"/></td>
                                <td><c:out value="${customer.customer_Id.customer_Phone}"/></td>
                                <td><input type="button" value="View Bill" class="billView"/></td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="ui form segment" id="balanceDiv" style="margin-left: 30px; margin-right: 34px;">
            <div class="three fields">
                <div class="field">
                    <label>Total Purchase Amount:-</label>
                    <div class="ui left icon input">
                        <input type="number" id="totalPurchaseAmount" readonly="readonly" name="totalPurchaseAmount" value="${MapDetails['Purchase']}" placeholder="Total Purchase Amount"/>
                        <i class="location icon"></i>
                    </div>
                </div>
                <div class="field">
                    <label>Total Paid Amount:-</label>
                    <div class="ui left icon input">
                        <input type="number" id="totalPaidAmount" readonly="readonly" name="totalPaidAmount" placeholder="Total Paid Amount"  value="${MapDetails['Payment']}" />
                        <i class="location icon"></i>
                    </div>
                </div>
                <div class="field">
                    <label>Total Balance Amount:-</label>
                    <div class="ui left icon input">
                        <input type="number" id="totalBalance" readonly="readonly" name="totalBalance" placeholder="Total Balance" value="${MapDetails['Balance']}"/>
                        <i class="location icon"></i>
                    </div>
                </div>
            </div>

        </div>

    </body>
</html>
